<template>
  <div class="service-config-wrapper">
    <div class="todo-item-box">
      <div class="todo-item">
        <div class="todo-header"> 是否开启即将交车提醒: {{ info.giveSoonStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            距离订单的预计用车时间前
            <span class="num">{{ info.giveTimeBefore }}</span>
            分钟，触发待办提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启GPS设备或车载box异常提醒: {{ info.carVehicleErrorStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            GPS设备或车载box连续离线超过
            <span class="num">{{ info.carVehicleOfflineDay }}</span>
            天，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启车辆异动提醒: {{ info.carAbnormalMoveStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            处于空闲可租车辆的行驶轨迹距离大于
            <span class="num">{{ info.carMoveKilometer }}</span>
            公里，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启车辆多天未动提醒: {{ info.carUnmoveStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            绑定了GPS设备或车载box且处于租赁中的车辆连续
            <span class="num">{{ info.carUnmoveRentDay }}</span>
            天无位置变动记录，触发预警提醒。
          </div>
          <div class="body-item">
            绑定了GPS设备或车载box且处于空闲可租和运维中的车辆连续
            <span class="num">{{ info.carUnmoveDay }}</span>
            天无位置变动记录，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启车辆待巡检提醒: {{ info.carViewStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            车辆在订单完成交车后连续
            <span class="num">{{ info.carViewRentDay }}</span>
            天无还车和换车的操作，触发预警提醒。
          </div>
          <div class="body-item">
            车辆在运维单开始维修后连续
            <span class="num">{{ info.carViewDay }}</span>
            天无完成运维的操作，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启车辆油电量异常提醒: {{ info.oilErrorStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            交车油电量比当前车辆上次的还车油电量差
            <span class="num">{{ info.oilDiff }}</span>
            以上时，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启车辆里程异常提醒: {{ info.mileageErrorStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            交车或入厂公里数比当前车辆的公里数差
            <span class="num">{{ info.mileageDiff }}</span>
            公里以上时，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启交强险即将到期提醒: {{ info.insureCompulsoryStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            距交强险到期日剩余
            <span class="num">{{ info.insureCompulsoryDay }}</span>
            天和已超交强险到期日的车辆，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启商业险即将到期提醒: {{ info.insureBusinessStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            距商业险到期日剩余
            <span class="num">{{ info.insureBusinessDay }}</span>
            天和已超商业险到期日的车辆，触发预警提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启即将保养提醒: {{ info.maintenanceBeforeStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            保养间隔时间
            <span class="num">{{ info.maintenanceLimitDay }}</span> 天。
            <span class="gray">（用途：在保养单中填写完本次保养日期后，会根据保养间隔时间的配置自动计算出下次保养日期）</span>
            <div>
              距保养到期日剩余
              <span class="num">{{ info.maintenanceBeforeDay }}</span>
              天和已超保养到期日的车辆，触发预警提醒。
            </div>
          </div>
          <div class="body-item">
            保养间隔里程
            <span class="num">{{ info.maintenanceLimitMileage }}</span> 公里。
            <span class="gray">（用途：在保养单中填写完本次保养里程后，会根据保养间隔里程的配置自动计算出下次保养里程）</span>
            <div>
              距下次保养里程剩余
              <span class="num">{{ info.maintenanceBeforeMileage }}</span>
              公里和已超下次保养里程的车辆，触发预警提醒。
            </div>
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启即将年检提醒: {{ info.inspectionBeforeStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            年检间隔时间
            <span class="num">{{ info.inspectionLimitDay }}</span> 天。
            <span class="gray">（用途：在年检单中填写完本次年检日期后，会根据年检间隔时间的配置自动计算出下次年检日期）</span>
            <div>
              距年检到期日剩余
              <span class="num">{{ info.inspectionBeforeDay }}</span>
              天和已超年检到期日的车辆，触发预警提醒。
            </div>
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启违章待查询提醒: {{ info.violationQueryStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            订单状态变更为已还车后
            <span class="num">{{ info.violationQueryOrderReturnDay }}</span>
            天，车辆未查询违章，则触发待办提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启同行费用即将结算提醒: {{ info.industryBillStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            同行下待确认的费用的应结日期前
            <span class="num">{{ info.industryBillDay }}</span>
            天和超过应结日期还未确认的费用，触发待办提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启供应商费用即将结算提醒: {{ info.supplierBillStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            供应商下待确认的费用的应结日期前
            <span class="num">{{ info.supplierBillDay }}</span>
            天和超过应结日期还未确认的费用，触发待办提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <div class="todo-item">
        <div class="todo-header"> 是否开启长租订单即将结算提醒: {{ info.czsFeeBillStatus ? '是' : '否' }} </div>
        <div class="todo-body">
          <div class="body-item">
            长租订单待确认的费用的应结日期前
            <span class="num">{{ info.czsFeeBillBeforeDay }}</span>
            天和超过应结日期还未确认的费用，触发待办提醒。
          </div>
        </div>
      </div>
      <a-divider />
      <!-- 违章 -->
      <DetailItem
        title="短租订单租车押金未缴纳提醒"
        :status="info.depositOrderGiveUnpayStatus"
        :value="info.depositOrderGiveUnpayMinute"
        desc="短租订单在交车{X}分钟 后，订单关联的租车押金状态仍为应收未收的，触发提醒"
      />
      <DetailItem
        title="短租订单租车押金应退未退提醒"
        :status="info.depositOrderReturnUnrefundStatus"
        :value="info.depositOrderReturnUnrefundMinute"
        desc="短租订单在还车/完成/取消/作废{X}分钟后，订单关联的租车押金状态仍为应退未退的，触发提醒"
      />
      <DetailItem
        v-if="alipaySwitch"
        title="短租订单违章押金应退未退提醒"
        :status="info.depositOrderViolationUnrefundStatus"
        :value="info.depositOrderViolationUnrefundHour"
        desc="通过芝麻免押的押金，租车转违章后违章押金达到预计解冻时间{X}小时后，违章押金状态仍为应退未退的，触发提醒"
      />
      <DetailItem
        v-if="alipaySwitch"
        title="短租订单租车押金即将到期提醒"
        :status="info.depositCarFreezeDueStatus"
        :value="info.depositCarFreezeDueDay"
        desc="通过芝麻免押的押金，租车押金距离预计解冻{X}天前，租车押金状态为应收已收或应退未退的，触发提醒"
      />
      <DetailItem
        title="短租订单违章押金即将到期提醒"
        :status="info.depositViolationFreezeDueStatus"
        :value="info.depositViolationFreezeDueDay"
        desc="违章押金距离预计解冻{X}天 前，违章押金状态为应收已收或应退未退的，触发提醒"
      />
      <DetailItem
        v-if="alipaySwitch"
        title="短租订单承租人唯一租车押金即将到期提醒"
        :status="info.depositMemberFreezeDueStatus"
        :value="info.depositMemberFreezeDueDay"
        desc="通过芝麻免押的押金，承租人只有一笔冻结中的租车押金时，租车押金距离预计解冻{X}天前，违章押金状态为应收已收或应退未退的，触发提醒"
        :showDivider="false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import DetailItem from '../components/detail-item.vue'
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()

  userStore.setEpDetail()
  const alipaySwitch = computed(() => {
    return userStore.syncInventory.alipaySwitch == 1
  })

  defineProps({
    info: {
      type: Object,
      default: () => ({}),
    },
  })
</script>

<style lang="less" scoped>
  .service-config-wrapper {
    padding: 0 20px;
    .todo-item-box {
      .todo-item {
        .todo-header {
          font-size: 14px;
          font-weight: 600;
          color: #1d2129;
        }
        .todo-body {
          width: 100%;
          background: rgba(247, 248, 250, 0.5);
          padding: 20px 20px;
          margin-top: 8px;

          .body-item {
            margin-bottom: 12px;
            &:last-child {
              margin-bottom: 0;
            }
          }

          .num {
            color: #1890ff;
            font-weight: 600;
          }
        }
      }
    }
  }
  .gray {
    color: #4e5969;
  }
</style>
